<template>
  <view class="layout">
    <view class="juzhong">
      <view class="juzhong big_header">查看充值日志</view>
    </view>
    <view class="table">
      <!-- 表头 -->
      <view class="table-row header">
        <text class="table-cell">时间</text>
        <text class="table-cell">会员类型</text>
        <text class="table-cell">ID</text>
        <text class="table-cell">金额</text>
      </view>

      <!-- 使用v-for遍历数据 -->
      <view v-for="(item, index) in feedbackData" :key="index" class="table-row">
        <text class="table-cell">{{ item.payTime }}</text>
        <text class="table-cell">{{ item.memberType }}</text>
        <text class="table-cell">{{ item.openId }}</text>
        <text class="table-cell">{{ item.amount }}</text>
      </view>
    </view>
    <view class="juzhong" style="font-size: 20rpx;">
      滑动查看更多...
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackData: [],
    };
  },
  onLoad() {
    this.fetchData(); // 页面加载时调用 fetchData
  },
  methods: {
    fetchData() {
      console.log("开启监听");  // 调试输出，确保方法被调用
      uni.request({
        url: 'http://g756z5.natappfree.cc/api/member/memberBillLog', // 替换成您的API接口地址
        method: 'GET',
        success: (res) => {
          console.log("请求返回数据:", res.data);  // 打印返回的数据结构
          if (res.data && res.data.data) {
            console.log("res.data.data", res.data.data);  // 打印具体的数据部分
            this.feedbackData = res.data.data; // 请求成功后将数据赋值给 feedbackData
          } else {
            uni.showToast({
              title: '没有数据',
              icon: 'none',
            });
          }
        },
        fail() {
          uni.showToast({
            title: '请求失败，请重试',
            icon: 'none',
          });
        },
        complete() {
          console.log('请求完成'); // 请求完成后调试输出
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  margin: 10rpx;
}
.big_header {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0px;
  line-height: 26.06px;
  color: rgba(121, 72, 234, 1);
  width: 350rpx;
  border-bottom: 8rpx solid rgba(121, 72, 234, 1);
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.table {
  width: 100%;
  border: 1px solid #ccc;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.table-cell {
  flex: 1;
  padding: 10px;
  text-align: center;
}

.header {
  background-color: #f0f0f0;
  font-weight: bold;
}

.juzhong {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
</style>
